<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @media screen and (max-width: 2048px) {

            html,
            body {
                font-size: 12px;
                margin: 0;
            }

            .app_header {
                height: 7.8rem;
                width: 100%;
                position: fixed;
                z-index: 1;
                background-color: white;
                border-bottom: 0.5px solid #f0f0f0;
            }

            .app_header_search {
                background-color: #f0f0f0;
                width: 90%;
                height: 3rem;
                border-radius: 1.5rem;
                margin: .5rem auto;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;

            }

            .app_header_search_image {
                height: 1.5rem;
                width: 1.5rem;
                margin-top: .2rem;
                margin-right: .3rem
            }

            .app_header_serarch_text {
                line-height: 3rem;
                font-size: 1.2rem;
                color: #ccc;
            }

            .app_header_menu {
                overflow: hidden;
            }

            .app_header_menu>ol {
                padding-left: 0;
                margin: 0;
            }

            .app_header_menu>ol>li {
                list-style-type: none;
                float: left;
                font-size: 1.4rem;
                height: 3rem;
                text-align: center;
                padding-top: .5rem;
                color: #ccc;
                margin: 0 1.5rem;
            }

            .active {
                border-bottom: 3px solid #EA6F5A;
                color: black !important;
            }

            .app_footer {
                position: fixed;
                z-index: 1;
                border-top: 0.3px solid #f0f0f0;
                bottom: 0;
                background-color: white;
                width: 100%;
                height: 5rem;
                display: flex;
                flex-direction:row;
                justify-content:space-around;
            }

            .app_footer_image {
                margin-top:.7rem;
                width: 2rem;
                height: 2rem;
            }
        }
    </style>

</head>

<body>
    <header class="app_header">
        <nav class="app_header_search">
            <div>
                <img src="../../img/search2.png" class="app_header_search_image">
            </div>
            <div class='app_header_serarch_text'>搜索感兴趣的内容</div>
        </nav>
        <section class="app_header_menu">
            <ol id="app_header_menu_ol">
                <li class="active" data-id="1">推荐</li>
                <li data-id="2">专题</li>
                <li data-id="3">连载</li>
            </ol>
        </section>
    </header>
    <footer class="app_footer">
        <nav>
            <div>
                <img class="app_footer_image" src="../../img/tabBar/index1.png" alt="">
            </div>
            <div>首页</div>
        </nav>
        <nav>
            <div>
                <img class="app_footer_image" src="../../img/tabBar/attention0.png" alt="">
            </div>
            <div>关注</div>
        </nav>
        <nav>
            <div>
                <img class="app_footer_image" src="../../img/tabBar/message0.png" alt="">
            </div>
            <div>消息</div>
        </nav>
        <nav>
            <div>
                <img class="app_footer_image" src="../../img/tabBar/my0.png" alt="">
            </div>
            <div>我的</div>
        </nav>
    </footer>
</body>

</html>
<script>
    document.getElementById("app_header_menu_ol").addEventListener("click", event => {
        let currentLi = event.target;
        let arrays = document.querySelectorAll("#app_header_menu_ol>li");
        [...arrays].forEach(element => {
            if (element == currentLi) {
                element.classList.add("active");
            } else {
                element.classList.remove("active");
            }

        });
    }, false);
</script>